<template>
	<a-drawer
		v-model:open="open"
		:mask="false"
		title="德科报备插件"
		width="400"
		@after-open-change="afterOpenChange"
		@close="handleClose"
		zIndex="100000"
	>
		<div class="resume-drawer-container">
			<!-- 个人基本信息 -->
			<div class="base-info-container">
				<!-- 基本信息 -->
				<div class="base-info-wrapper">
					<!-- 头像 -->
					<div class="candidate-avatar">
						<img :src="resume.baseInfo?.avatar || ''" alt="" />
					</div>
					<!-- 个人信息详情 -->
					<div class="candidate-info">
						<!-- 姓名 -->
						<div class="candidate-name">
							<span>{{ resume.baseInfo?.name || '未知姓名' }}</span>
							<!-- 报备按钮 -->
							<div class="report-button">
								<a-button type="link" @click="handleReport">报备</a-button>
							</div>
						</div>
						<!-- 其他信息 -->
						<div class="candidate-detail">
							<span v-if="resume.baseInfo?.experience">{{ resume.baseInfo?.experience || '无经验' }}</span>
							<a-tooltip v-if="resume.baseInfo?.highestSchool" :title="resume.baseInfo?.highestSchool || '未知学校'">
								<span class="ellipsis-text">{{ resume.baseInfo?.highestSchool || '未知学校' }}</span>
							</a-tooltip>
							<span v-if="resume.baseInfo?.degree">{{ resume.baseInfo?.degree || '无学历' }}</span>
						</div>
						<!-- 其他信息 -->
						<div class="candidate-detail">
							<img src="../images/company.png" alt="" class="detail-icon" />
							<span>{{ resume.workExperience?.currentCompany || '随时到岗' }}</span>
						</div>
					</div>
				</div>
				<!-- 个人介绍 -->
				<div class="candidate-introduction">
					<a-tooltip :title="resume.baseInfo?.introduction || '暂无个人介绍'" placement="left">
						<span>{{ resume.baseInfo?.introduction || '暂无个人介绍' }}</span>
					</a-tooltip>
				</div>
			</div>
			<!-- 分页栏 -->
			<div class="tab-container">
                <a-tabs v-model:activeKey="activeKey" centered>
				<a-tab-pane key="1" tab="简历快读">
					<FastReading :resume="resume" />
				</a-tab-pane>
				<a-tab-pane key="2" tab="AI沟通" force-render>Content of Tab Pane 2</a-tab-pane>
				<a-tab-pane key="3" tab="快捷话术">
					<QuickTalk @success="handleSuccess" />
				</a-tab-pane>
			</a-tabs>
            </div>
		</div>
	</a-drawer>
</template>

<script setup>
// ------------------ import ------------------
import { ref, reactive, watch, defineEmits, defineProps } from 'vue';
import FastReading from './FastReading.vue';
import QuickTalk from './QuickTalk.vue';
import {
	getResumeDOM, // 获取简历DOM元素
    convertResumeFields // 转换简历字段
} from '../api/yupao.js';
import { 
    reportResume // 报备简历
} from '../api/utils.js';

// ------------------ props ------------------
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	}
});
// ------------------ emits ------------------
const emit = defineEmits(['close', 'error', 'success']);
// ------------------ data ------------------
const open = ref(false);
const activeKey = ref('1');
const resume = reactive({});
// ------------------ watch ------------------
watch(
	() => props.visible,
	(val) => {
		open.value = val; // 同步 open 和 props.visible 的状态
		if (val) {
			// 每次打开抽屉时都重新获取简历数据
			handleGetResume();
		}
	}
);
// ------------------ methods ------------------
/**
 * 抽屉打开后回调
 * @param {boolean} visible - 抽屉是否打开
 */
const afterOpenChange = (visible) => {
	console.log('afterOpenChange', visible);
};
/** 抽屉关闭回调 */
const handleClose = () => {
	emit('close');
	// 完全重置简历数据，确保下次打开时重新获取
	Object.keys(resume).forEach((key) => {
		delete resume[key];
	});
	// 注意：不在这里设置 open.value = false，因为应该由 props.visible 控制
};
/** 获取简历数据 */
const handleGetResume = async () => {
	try {
		const resumeData = getResumeDOM();
        
		if (resumeData == '未找到简历容器元素') {
            emit('error', '请打开聊天界面，并点击上方卡片以获取简历信息');
			
			emit('close'); // 通知父组件关闭抽屉
			return;
		} else {
			// 更新resume对象的属性
			Object.assign(resume, resumeData);
			// open.value 已经在 watch 中设置为 true，这里不需要再设置
		}
	} catch (error) {
		console.error('获取简历数据时出错:', error);
		emit('error', '获取简历数据失败');
		emit('close'); // 通知父组件关闭抽屉
	}
};
/** 报备简历 */
const handleReport = async () => {
	try {
        const resumeData = convertResumeFields(resume);
        console.log('报备简历数据=====>', resumeData);
		const res = await reportResume(resumeData);
        console.log(res);
        
		emit('success', '报备成功');
	} catch (error) {
		console.error('报备简历时出错:', error);
		emit('error', '报备失败');
	}
};

/** 快捷话术复制成功回调 */
const handleSuccess = (text) => {
	emit('success', text);
};
</script>

<style lang="scss">
.ant-drawer-body {
	padding: 0px !important;
}

.ant-tabs-nav {
	margin: 0 !important;
}

.ant-tabs-content,
.ant-tabs-tabpane {
	// 隐藏滚动条、滚动滑块
	&::-webkit-scrollbar {
		display: none !important;
	}
}

.resume-drawer-container {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	color: #333;
    height: 100%;
	overflow: auto;

	// 取消滚动条、滚动滑块
	&::-webkit-scrollbar {
		display: none !important;
	}
	
	// 只针对抽屉内部的特定元素隐藏滚动条
	.base-info-container,
	.tab-container {
		&::-webkit-scrollbar {
			display: none !important;
		}
	}

	.base-info-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 20px;
		border-bottom: 1px solid #f3f4f6;

		.base-info-wrapper {
			display: flex;
			flex-direction: row;
			gap: 4px;

			.candidate-avatar {
				width: 72px;
				min-width: 72px;
				height: 72px;
				border-radius: 4px;
				overflow: hidden;

				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.candidate-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 100%;
				padding: 0 10px;

				.candidate-name {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 16px;
					font-weight: bold;
				}
				.candidate-detail {
					display: flex;
					align-items: center;
					gap: 5px;
					color: #666;

					span + span::before {
						content: '•';
						margin: 0 5px;
					}
				}
			}
		}

		.candidate-introduction {
			display: block;
			width: 100%;
			padding: 10px;
			background-color: #f0f0f0;
			border-radius: 4px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.report-button {
			display: flex;
			justify-content: flex-end;

			.ant-btn {
				margin: 0 !important;
				height: 14px;
				padding: 0;
				line-height: 1em;
			}
		}
	}

	.detail-icon {
		width: 14px;
		height: 14px;
	}

	.ellipsis-text {
		max-width: 100px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
	}
}
</style>
